<template>
	<view class="meeting">
		<u-sticky bgColor="#fff">
			<u-tabs :list="dateArr" lineWidth="0" tabsType="date" :current="tabsCurrent" :activeStyle="{
			            color: '#FFFFFF',
			            fontWeight: 'bold',
						background:'#f74062',
						borderRadius: '10rpx',
						padding:'10rpx 15rpx',
			        }" :inactiveStyle="{
			            color: '#333333',
						borderRadius: '10rpx',
						padding:'10rpx 15rpx',
			        }" itemStyle="height: 60px;">

				<view class="tabs-right" slot="right" @click="handleSelector">
					<view class="">{{fullYear}}年</view>
					<view class="icon">
						<text>{{month}}月</text>
						<u-icon name="arrow-down" color="#333333" size="16"></u-icon>
					</view>
				</view>
			</u-tabs>
		</u-sticky>

		<view class="cell">
			<view class="cell-item" v-for="i in 5" :key="i" @click="handleDetails">
				<view class="cell-item-tips">
					<view class="title">2701会议室</view>
					<view class="">可容纳人数：100</view>
				</view>
				<view class="cell-item-tips">
					<view class="" style="padding-left: 40rpx;">地址：京信</view>
					<view class="">预约电话：010-68450751</view>
				</view>
				<view class="cell-item-progress">
					<view class="text">
						<view class="" v-for="item in 20" :key="item">{{item}}</view>
					</view>
					<!-- 进度器 -->
					<view class="imgae">
						<view class="imgae-active"></view>
					</view>
				</view>
			</view>
		</view>
		<!-- 日期 -->
		<u-calendar :show="show" color="#f74062" mode="single" @close="show = false" @confirm="confirm"></u-calendar>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				tabsCurrent: 0,
				dateArr: [],
				show: false,
				fullYear: '',
				month: ''
			}
		},
		methods: {
			handleDetails(){
				uni.navigateTo({
					url: '/homePages/meetingField/meeting/details'
				})
			},
			confirm(options) {
				console.log('选择当前时间:', options[0])
				this.getDate(options[0])
				this.show = false
			},
			handleSelector() {
				this.show = true
			},
			getDate(date) {
				if (!date) date = new Date()
				else date = new Date(date.replace(/\-/g, "\/"))

				this.fullYear = date.getFullYear()
				this.month = date.getMonth() + 1

				let nowDay = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate() //当前一共有多少天
				this.dateArr = []
				for (let day = 1; day <= nowDay; day++) {
					let weeks = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六")
					let forDate = new Date(`${date.getFullYear()}/${date.getMonth()+1}/${day}`)

					if (forDate.getTime() < Date.now()) continue;
					this.dateArr.push({
						date: `${date.getFullYear()}/${date.getMonth()+1}/${day}`,
						day,
						week: weeks[forDate.getDay()]
					})
				}
			}
		},
		mounted() {
			this.getDate()
		},
	}
</script>
<style lang="scss" scoped>
	.meeting {
		.cell {
			margin: 50rpx 10rpx 0 10rpx;
			box-shadow: 0 0 0 2px #f2f2f2;
			border-radius: 10rpx;
			padding: 10rpx 0;

			.cell-item {
				padding: 40rpx 20rpx;
				position: relative;
				&+ .cell-item{
					&::after{
						content: "";
						position: absolute;
						top: 0;
						left: 50rpx;
						right: 50rpx;
						border-bottom: 1px solid #f2f2f2;
					}					
				}

				.cell-item-progress {
					.text {
						margin-top: 20rpx;
						display: flex;
						justify-content: space-between;
						margin-bottom: 4rpx;
					}

					.imgae {
						border-radius: 40rpx;
						height: 40rpx;
						background-color: rgba(129, 211, 248, 0.454901960784314);
						position: relative;
						overflow: hidden;

						.imgae-active {
							position: absolute;
							left: 0;
							right: 10%;
							top: 0;
							bottom: 0;
							background-color: rgba(215, 215, 215, 0.717647058823529);
							transition: all .3s;
						}
					}
				}

				.cell-item-tips {
					display: flex;
					justify-content: space-between;

					&+.cell-item-tips {
						margin-top: 20rpx;
					}

					font-size: 24rpx;

					.title {
						font-size: 32rpx;
						font-weight: bold;
					}
				}
			}
		}

		.tabs-right {
			padding: 0 20rpx;

			.icon {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 6rpx;
			}
		}
	}
</style>
